<template>
  <div>
    <!-- 头部 -->
    <div class="header flex align-center justify-between">
      <van-icon name="arrow-left" color="#a36663" size="22" />
      <img
        class="logo"
        src="http://img.maixiaobu.cn/kissmilan/fixed/20170718/a7aecada618904f2.png"
        alt=""
      />
      <van-icon name="shopping-cart" color="#a36663" size="22" />
    </div>
    <!-- 用户个人资料 -->
    <div class="user flex">
      <img
        src="http://img.maixiaobu.cn/kissmilan/fixed/20181011/67bc3378f89ec850.jpeg"
        alt=""
      />
      <div>
        <div class="list flex justify-between">
          <div class="flex">
            <div class="left">
              <ul>
                <li>
                  <i class="iconfont color-main people">&#xe6b1;</i>
                </li>
                <li>
                  <i class="iconfont color-main">&#xe602;</i>
                </li>
                <li>
                  <i class="iconfont color-main">&#xe66b;</i>
                </li>
                <li>
                  <i class="iconfont color-main">&#xe688;</i>
                </li>
              </ul>
            </div>
            <div class="right">
              <ul class="color-main fs-22">
                <li>
                  昵称：<span>{{ userOtherName }}</span>
                </li>
                <li>{{ userTel.phone }}</li>
                <li>余额：<span>0.00</span></li>
                <li>付费登记：<span>暂无</span></li>
              </ul>
            </div>
          </div>
          <div>
            <div class="turn"></div>
            <router-link to="/userinfo"
              ><i class="iconfont color-main fs-28 font-bold"
                >&#xee30;</i
              ></router-link
            >
          </div>
        </div>
        <div class="top flex">
          <div class="chong fs-24">充值</div>
          <div class="er fs-24">我的二维码</div>
        </div>
      </div>
    </div>

    <!-- 订单详情 -->
    <div class="order">
      <van-grid :column-num="5" :border="false">
        <van-grid-item @click="handleTo">
          <i class="iconfont">&#xeba7;</i>
          <p>待付款</p>
        </van-grid-item>
        <van-grid-item @click="handleToget()">
          <i class="iconfont">&#xe605;</i>
          <p>待收货</p>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont down">&#xe629;</i>
          <p>已完成</p>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont">&#xe969;</i>
          <p>客服</p>
        </van-grid-item>
        <van-grid-item @click="handleAll">
          <i class="iconfont">&#xe64f;</i>
          <p>我的订单</p>
        </van-grid-item>
        <router-link to="/address">
          <van-grid-item>
            <i class="iconfont">&#xe76f;</i>
            <p>收货地址</p>
          </van-grid-item>
        </router-link>
        <van-grid-item>
          <p class="teshu">0</p>
          <p>积分</p>
        </van-grid-item>
        <van-grid-item>
          <p class="teshu">0</p>
          <p>我的礼券</p>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont">&#xe601;</i>
          <p>礼券领取</p>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont">&#xe62d;</i>
          <p>我的权益</p>
        </van-grid-item>
      </van-grid>
      <van-icon name="arrow" color="#a36663" size="1.6rem" class="right1" />
      <van-icon name="arrow" color="#a36663" size="1.6rem" class="right2" />
    </div>

    <!-- 底部 -->
    <TabBar></TabBar>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
import TabBar from "../components/TabBar.vue";
import { useRouter } from "vue-router";

let router = useRouter();
let store = useStore();
let userOtherName = computed(() => {
  return store.state.address.userOtherName;
});
let handleTo = () => {
  router.push("/waitpay");
};
let handleToget = () => {
  router.push("/waitget");
};
let handleAll = () => {
  router.push("/allorder");
};
let userTel = {};
if (store.state.user.userInfo) {
  userTel = computed(() => {
    return store.state.user.userInfo;
  });
} else {
  userTel = {};
}
</script>

<style lang="less" scoped>
// 头部
.header {
  height: 9.8rem;
  background-color: #fff;
  padding: 0 2.1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 10;
  box-shadow: 0 -2px 10px #ccc;

  .logo {
    width: 23.6rem;
  }
}

// 用户个人资料
.user {
  padding: 2.4rem 4.6rem 1rem 2rem;
  margin-top: 9.8rem;

  .list {
    width: 41.8rem;
  }

  img {
    height: 20rem;
    border-radius: 50%;
    margin-right: 6.6rem;
  }

  .list {
    height: 20.8rem;
    margin-top: 3rem;

    .left {
      margin-right: 2rem;

      ul {
        text-align: center;

        li {
          margin-bottom: 2.6rem;
          height: 3rem;

          .people {
            font-size: 4rem;
          }
        }
      }
    }

    .turn {
      height: 6rem;
    }

    .right {
      ul {
        margin-top: 0.6rem;

        li {
          margin-bottom: 2.6rem;
          height: 3rem;
        }
      }
    }
  }

  .top {
    width: 25.2rem;
    // margin-left: ;
    margin-top: 1.6rem;

    .chong {
      width: 8rem;
      height: 3.6rem;
      background-color: #a36663;
      margin: 0 2rem 0 2rem;
      text-align: center;
      line-height: 3.6rem;
      color: #fff;
    }

    .er {
      width: 15.2rem;
      height: 3.6rem;
      background-color: #a36663;
      text-align: center;
      line-height: 3.6rem;
      color: #fff;
    }
  }
}

// 订单详情
.order {
  position: relative;
  i {
    font-size: 6rem;
    color: #a36663;
    margin-bottom: 1rem;
    font-weight: bold;
  }
  p {
    font-size: 2.4rem;
    color: #a36663;
  }
  .down {
    font-size: 5rem;
  }
  .teshu {
    margin-bottom: 4.4rem;
    font-size: 1.8rem;
    font-weight: bold;
  }
  .right1 {
    position: absolute;
    right: 14.5rem;
    top: 5.5rem;
  }
  .right2 {
    position: absolute;
    right: 14.5rem;
    top: 22.5rem;
  }
}
:deep(.van-grid) {
  justify-content: flex-end;
}
</style>
